<template>
  <div class="two">
    <div id="mainFour"></div>
  </div>
</template>

<script>
//象形图
import * as echarts from 'echarts';
export default {
  data() {
    return {
      value: '',
      yearly: [],
      countrylist: [],
      isLoading: false,
      dateboundlist: {}, //时间为key
      myChart: null,
    }
  },
  mounted() {
    this.getDataDraw();
  },
  methods: {
    //请求数据
    getDataDraw() {
      this.isLoading = true;
      this.$store.dispatch("ajaxApi", {
        url: `/zonghe/api/algor?name.equals=粮食产量&sort=add_time,desc&size=1`,
        method: "get",
        succeed: (res) => {
          // console.log(res);
          let data = JSON.parse(res[0].outputs)
          let forecast = data.forecast;
          let original = data.original;
          console.log(original);
          console.log(forecast);
          let timeOnNum=0;
          for (let key in original) {
            if (this.yearly.length == 0) {
              for (let item of original[key]) {
                this.yearly.push(item.x);
                this.yearly.sort();
              }
            }
            timeOnNum++;
            let offsetNum=0;
            if(timeOnNum<4&&timeOnNum>1){
                offsetNum=-70 * (timeOnNum-1);
            }else if(timeOnNum>=4){
                offsetNum=70 * (timeOnNum-3);
            }
            for (let a = 0; a < original[key].length; a++) {
              let obj = {};
              obj.name = key;
              obj.value = original[key][a].y%100;
            //   obj.value = original[key][a].y;
                 console.log(offsetNum)
                    obj.title = {
                    offsetCenter: [offsetNum + '%', '80%']
                    };
                    obj.detail = {
                    offsetCenter: [offsetNum + '%', '95%']
                    }

              if (!this.dateboundlist[ original[key][a].x]) {
                this.dateboundlist[original[key][a].x] = []
              }
              this.dateboundlist[original[key][a].x].push(obj);
            }
          }
          this.yearly.push(Number(this.yearly[this.yearly.length - 1]) + 1);
          this.dateboundlist[this.yearly[this.yearly.length - 1]] = [];
          for (let i in forecast) {
            let small = {};
            small.name = i;
            small.value = forecast[i][0].y;
            this.dateboundlist[this.yearly[this.yearly.length - 1]].push(small);
          }
          this.value = this.yearly[0]
          this.initCharts(this.dateboundlist[this.value]);
        },
        errored: (err) => {
          // console.log(err);
          if (err.response) {
            this.islistLoad = false;
            this.modelsData = [];
          }
        }
      });
    },
    initCharts(seconddata) {
      console.log(seconddata);
      this.$emit('changeNum','four',{arr: this.yearly,value: this.value})
      var chartDom = document.getElementById('mainFour');
      this.myChart = echarts.init(chartDom);
      var option;
      option = {
                      grid: {
                        left: '0%',
                        right: '0%',
                        top: '0%',
                        bottom: '3%',
                        containLabel: true
                    },
        series: [ {
      type: 'gauge',
      anchor: {
        show: true,
        showAbove: true,
        size: 18,
        itemStyle: {
          color: '#fff'
        }
      },
      pointer: {
        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
        width: 10,
        length: '80%',
        offsetCenter: [0, '8%']
      },
      progress: {
        show: true,
        overlap: true,
        roundCap: true
      },
      axisLine: {
        roundCap: true
      },
      data: seconddata,
      title: {
        fontSize: 14
      },
      detail: {
        width: 40,
        height: 14,
        fontSize: 14,
        color: '#fff',
        backgroundColor: 'auto',
        borderRadius: 3,
        formatter: '{value}%'
      }
    }]
      };

      option && this.myChart.setOption(option);
                                                window.addEventListener('resize', () => {
                // 自动渲染echarts
                this.myChart.resize();
      })
    },
    //切换数据
    changeNum(val) {
      var option = this.myChart.getOption();
      for (let item of this.dateboundlist[val]) {
        item['symbol'] = 'image://../../../../../static/image/food.png';
      }
      option.series[0].data = this.dateboundlist[val];
      this.myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.two {
  width: 100%;
  height: 100%;
}

.header-select {
  width: 100%;
  height: 30px;
  text-align: center;
}

#mainFour {
  width: 100%;
  height: 100%;
  /* height: calc(100% - 50px); */
}
</style>